<template>
  <div class="content-item">
    <div class="form-wrap">
      <form class="condition-item">
        <div class="row-item">
          <span class="txt">标段</span>
          <el-select
            v-model="formInfo.bidSection"
            size="small"
            class="inline-input"
            placeholder="请选择"
            @change="getWorkAreaList">
            <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>
        <div class="row-item">
          <span class="txt">工区</span>
          <el-select
            v-model="formInfo.areaId"
            size="small"
            class="inline-input"
            placeholder="请选择"
            @change="getDeviceInfo">
            <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>

        <div class="row-item">
          <span class="txt">设备</span>
          <el-select
            v-model="formInfo.thirdPartyId"
            size="small"
            class="inline-input"
            placeholder="请选择"
            @change="queryListData">
            <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>

        <div class="row-item">
          <span class="txt">车牌</span>
          <el-input v-model="formInfo.number" size="small" clearable class="inline-input" placeholder="请输入" />
        </div>

        <div class="row-item">
          <span class="txt">时间</span>
          <el-date-picker
            v-model="time"
            style="width: 220px"
            type="daterange"
            size="small"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期" />
        </div>

        <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 20px;" @click="queryListData">查询</el-button>
      </form>
      <div class="data-stat-item">
        <div class="data-row" style="margin-right: 20px;">
          <label>在场车辆</label>
          <span>{{ onlinePlace }} 辆</span>
        </div>
        <div class="data-row">
          <label>出入车辆</label>
          <span>{{ crossCount }} 辆</span>
        </div>
      </div>
    </div>

    <TableModel :table-data="comeOutRecordList" :loading="loading" style="margin-top: 20px;">
      <el-table-column prop="number" label="车牌号码"></el-table-column>
      <el-table-column prop="carType" label="车辆类型"></el-table-column>
      <el-table-column prop="createTime" label="通过时间"></el-table-column>
      <el-table-column prop="comeOutType" label="过车方向">
        <template slot-scope="{ row }">
          <el-tag v-if="row.inOutType == 1" size="mini">入口</el-tag>
          <el-tag v-if="row.inOutType == 2" type="danger" size="mini">出口</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="deviceName" label="出入口"></el-table-column>
      <el-table-column prop="bidSection" label="标段" v-if="tenantId != '828115'"></el-table-column>
      <el-table-column prop="result" label="放行结果"></el-table-column>
      <el-table-column prop="way" label="放行方式"></el-table-column>
      <el-table-column prop="reason" label="放行原因"></el-table-column>
    </TableModel>
    <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
  </div>
</template>

<script>
import Pagination from "../Pagination";
import TableModel from "../../models/TableModel";
import PublicMethods from "../../../util/PublicMethods";
import HttpInterface from "../../../util/httpInterface";
import Constants from "../../../util/constants";
import {mapActions, mapState} from "vuex";
import eventBus from "../../../util/eventBus";

export default {
  name: "CarComeOutRecord",
  components: {
    Pagination, TableModel
  },
  data() {
    return {
      loading: false,
      comeOutRecordList: [],
      tableHeight: 120,
      formInfo: {
        number: "",
        bidSection: "",
        thirdPartyId: "",
        areaId: "",
      },
      time: "",
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
      releaseResult: Constants.RELEASE_RESULT,  // 放行结果
      releaseWay: Constants.RELEASE_WAY,  // 放行方式
      releaseReason: Constants.RELEASE_REASON,  // 放行原因
      carTypeList: Constants.VEHICLE_TYPE,  // 车辆类型
      onlinePlace: "--",
      crossCount: "--",
      deviceList: [],
      workAreaInfo: []
    };
  },

  computed: {
    ...mapState(["tenantId", "biaoduanList"]),
  },

  watch: {
    biaoduanList(val) {
      this.formInfo.bidSection = val[0].id;
      this.getWorkAreaList();
    }
  },

  created() {
    eventBus.$on("getCarComeOut", (data) => {
      this.formInfo.bidSection = data.bidSection;
      this.formInfo.areaId = data.areaId;
      this.formInfo.thirdPartyId = data.thirdPartyId;
      this.getWorkAreaList(data);
    })
  },

  methods: {
    ...mapActions(["getCarDevice", "selectByBidSection"]),

    // 根据标段 查 工区列表
    getWorkAreaList(obj) {
      let _this = this;
      this.selectByBidSection({
        bidSection: this.formInfo.bidSection,
        fn: function (data) {
          if (_this.formInfo.bidSection) {
            _this.workAreaInfo = data;
            if (typeof obj === "object") {
              _this.formInfo.areaId = obj.areaId;
            } else {
              if (data.length == 0) {
                _this.formInfo.areaId = "";
              } else {
                _this.formInfo.areaId = data[0].id;
              }
            }
          } else {
            _this.workAreaInfo = [];
            _this.formInfo.areaId = "";
          }
          _this.getDeviceInfo(obj);
        }
      })
    },

    // 根据工区 查 车辆设备
    getDeviceInfo(obj) {
      let _this = this;
      this.getCarDevice({
        areaId: this.formInfo.areaId,
        fn (data) {
          if (_this.formInfo.areaId) {
            _this.deviceList = data;
            if (typeof obj === "object") {
              _this.formInfo.thirdPartyId = obj.thirdPartyId;
            } else {
              if (data.length == 0) {
                _this.formInfo.thirdPartyId = "";
              } else {
                _this.formInfo.thirdPartyId = data[0].id;
              }
            }
          } else {
            _this.deviceList = [];
            _this.formInfo.thirdPartyId = "";
          }

          if (typeof obj === "number") {
            _this.queryListData();
          } else {
            _this.getCarComeOutList();
          }
        }
      })
    },

    pageNumData (page) {
      this.pageData.pageNum = Number(page);
      this.getCarComeOutList();
    },

    pageSizeData (page) {
      this.pageData.pageSize = Number(page);
      this.getCarComeOutList();
    },

    queryListData () {
      let { bidSection, areaId, thirdPartyId } = this.formInfo;
      let data = { bidSection, areaId, thirdPartyId };
      eventBus.$emit("getListInfo", data)
    },

    screeningCondition (data) {
      let { releaseResult, releaseWay, releaseReason, carTypeList } = this;
      this.loading = false;

      data.forEach(item => {
        item.comeOutType = Constants.INOUT_ENTRANCE_LIST[item.inOutType];
        item.createTime = PublicMethods.formatDate(item.createTime);

        releaseResult.forEach(key => {
          if (item.releaseResult == key.id) item.result = key.text;
        })

        releaseWay.forEach(key => {
          if (item.releaseWay == key.id) item.way = key.text;
        })

        releaseReason.forEach(key => {
          if (item.releaseReason == key.id) item.reason = key.text;
        })

        carTypeList.forEach(key => {
          if (item.model == key.id) item.carType = key.text;
        })
      })

      this.comeOutRecordList = data;
    },

    // 获取出入记录
    getCarComeOutList () {
      this.loading = true;
      let _this = this;
      let { formInfo, pageData } = this;
      var params = formInfo;
      params.pageSize = pageData.pageSize;
      params.pageNum = pageData.pageNum;
      if (this.time && this.time.length > 0) {
        params.startDate = this.time[0] + " 00:00:00";
        params.endDate = this.time[1] + " 23:59:59";
      };

      HttpInterface.requestGet(this, HttpInterface.URL_VEHICLE_RECORD_LIST, params, function (res) {
        var { data, code, total } = res.data;  // 单租户
        if (code == "0000") {
          _this.screeningCondition(data);  // 单租户
          _this.pageData.total = total;
          _this.getComeOutCensus();
        } else {
          _this.dataLoadError();
        }
      }, function (err) {
        _this.dataLoadError();
      })
    },

    dataLoadError() {
      this.loading = false;
      this.comeOutRecordList = [];
      this.pageData.total = 0;
    },

    // 出入记录统计
    getComeOutCensus() {
      let params = {
        thirdPartyId: this.formInfo.thirdPartyId
      }
      HttpInterface.requestPost(this, HttpInterface.URL_PARK_REMAIN_SPACE_NUM, params, res => {
        let { success, other } = res.data;
        if (success) {
          let { crossCount, onlinePlace } = other;
          this.crossCount = crossCount;
          this.onlinePlace = onlinePlace;
        }
      }, null, true)
    }
  }
};
</script>

<style scoped lang="scss">
.form-wrap {
  display: flex;
  justify-content: space-between;

  .condition-item {
    display: flex;
    flex-wrap: wrap;
  }

  .row-item {
    display: flex;
    align-items: center;

    .txt {
      margin-right: 6px;
      font-size: 14px;
    }

    .inline-input {
      width: 120px;
      margin-right: 16px;
    }
  }

  .data-stat-item {
    display: flex;

    .data-row {
      min-width: 134px;
      height: 32px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      padding: 0 12px;
      box-sizing: border-box;
      border-radius: 2px;

      &:first-child {
        background-image: linear-gradient(120deg, #4bdaff 0%, #3986ff 100%);
      }

      &:last-child {
        background-image: linear-gradient(-120deg, #ff758c 0%, #ff7eb3 100%);
      }
    }
  }
}
</style>
